<!-- 文章列表 articleList -->
<template>
	<div class="backwarp">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-container style="padding: 60px 0;">
				<el-aside width="240px" style="padding-bottom: 120px;"><BackNavList></BackNavList></el-aside>
				<el-main>
					<div class="elMain">
						<div class="topCont">
							<span>文章列表</span>
							<el-button type="primary" @click="goTo">新增</el-button>
						</div>
						<div class="sheetCard">
							<el-table :data="tableData" stripe style="width: 100%" highlight-current-row >
								<el-table-column fixed prop="Id" label="ID" width="100"></el-table-column>
								<el-table-column prop="name" label="文章标题" width="280"></el-table-column>
								<el-table-column prop="cover" label="文章封面" width="200">
									<template scope="scope">
										<img :src="scope.row.cover" width="30" class="head_pic"/>
									</template>
								</el-table-column>
								<el-table-column prop="classify" label="文章分类" width="180"></el-table-column>
								<el-table-column prop="tags" label="文章标签" width="180"></el-table-column>
								<el-table-column prop="datetime" label="日期" width="200"></el-table-column>
								<el-table-column prop="author" label="作者" width="180"></el-table-column>
								<el-table-column fixed="right" label="操作" width="240">
									<template slot-scope="scope">
										<el-button @click="checkClick(scope.row)" type="success" size="small" round>查看</el-button>
										<el-button @click="editClick(scope.row.Id)" type="primary" size="small" round>编辑</el-button>
										<el-button @click="deletClick(scope.row.Id)" type="danger" size="small" round>删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-main>
			</el-container>
			<el-footer><a href="https://beian.miit.gov.cn">陇ICP备2021000907号-2</a></el-footer>
		</el-container>
	</div>
</template>

<script>
	import Header from '../../components/back/header.vue'
	import BackNavList from '../../components/back/backNavList.vue'
	export default {
		name: 'articleList',
		data() {
			return {
				tableData: [],
			}
		},
		mounted() {
			this.getDataList();
		},
		methods: {
			getDataList(){	// 数据请求
				this.$axios.post(this.HOST + '/api/indexPage').then(res => {
					let data = res.data.data;
					for (const i in data) {
						data[i].datetime = data[i].datetime.slice(0,10);
					}
					this.tableData = data
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			goTo(){
				this.$router.push("/addArticle");
			},
			checkClick(row){	// 查看
				let href = window.location.protocol + '//' + window.location.host + '/#/Article?ArtID=' + row.Id;
				this.$notify({
					title: '查看功能仅提供文章地址，可复制粘贴后自行预览',
					message: href,
					duration: 0,
					type: 'warning'
				});
			},
			editClick(e){	// 编辑
				this.$router.push({path:'/addArticle',query:{Id: e}});
			},
			deletClick(row){	// 删除
				console.log(row);	// deleteArticle
				this.$axios.post(this.HOST + '/api/deleteArticle', {
					Id: row,
				}).then(res => {
					this.$message({message: '已成功删除',type: 'success'});
					location.reload();
					console.log('提交成功', res.data)
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
		},
		components: {
			Header: Header,
			BackNavList: BackNavList,
		}
	}
</script>

<style>
	@import url("../../assets/css/backStyle.css");
	.backwarp .el-header{padding:0;position: fixed;width: 100%;z-index: 9999;}
</style>
